<style>
.p20l {
	padding-left: 20px;
}
.w30 {
	width: 30px !important;
}
.w80 {
	width: 80px !important;
}
.capitalize span {
	display: inline-block;
}
.capitalize span:first-letter {
	text-transform: uppercase;
}
</style>
<nav class="tab-bar">
  <section class="left-small">
    <a ng-click="cancel()" class="p10">
      <span class="text-close" translate>Close</span>
    </a>
  </section>
  <section class="middle tab-bar-section">
    <h1 class="title ellipsis" ng-style="{'color':color}" translate>
      Offer a contract
    </h1>
  </section>
</nav>


<div class="modal-content fix-modals-touch"  style="padding: 15px;">
	<form name="contractForm">

	<span translate>I pay</span>
	<input type="number" min="0" ng-attr-placeholder="{{'amount'|translate}}" ng-minlength="0.00000001" ng-maxlength="10000000000" ng-model="contract.myAmount" name="myAmount" valid-amount="{{contract.myAsset}}" required autocomplete="off" style="text-align: right" class="inline w80">
	<span selectable="#myasset" dropdown-toggle="#myasset" data-model="contract" data-prop="myAsset"></span>,
		<ul id="myasset" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="info in arrAssetInfos" class="dropup-item" data-value="{{info.asset}}">
			<a><span >{{info.displayName}}</span></a>
		  </li>
		</ul><br>
	<span translate>peer pays</span>
	<input type="number" min="0" ng-attr-placeholder="{{'amount'|translate}}" ng-minlength="0.00000001" ng-maxlength="10000000000" ng-model="contract.peerAmount" name="peerAmount" valid-amount="{{contract.peerAsset}}" required autocomplete="off" style="text-align: right" class="inline w80">
	<span selectable="#peerasset" dropdown-toggle="#peerasset" data-model="contract" data-prop="peerAsset"></span>
		<ul id="peerasset" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="info in arrPublicAssetInfos" class="dropup-item" data-value="{{info.asset}}">
			<a><span >{{info.displayName}}</span></a>
		  </li>
		</ul>
	<span translate>to</span>
	<span selectable="#peerpaysto" dropdown-toggle="#peerpaysto" data-model="contract" data-prop="peer_pays_to"></span>.
		<ul id="peerpaysto" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="dest in arrPeerPaysTos" class="dropup-item" data-value="{{dest.value}}">
			<a><span >{{dest.display_value}}</span></a>
		  </li>
		</ul><br>

	<span translate>If the peer doesn't pay, I can take my money back after</span>
	<input type="number" min="0.1" required name="time2out" id="tim2eout" ng-model="contract.timeout" style="text-align: right" class="inline w30">
	<span translate>hours</span>.<br><br>

	<span selectable="#dataparty" dropdown-toggle="#dataparty" data-model="contract" data-prop="data_party" data-exclusion-bind="expiry_party" class="capitalize" style="padding-right: 5px;"></span>
		<ul id="dataparty" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="party in arrParties" class="dropup-item" data-value="{{party.value}}">
			<a><span >{{party.display_value}}</span></a>
		  </li>
		</ul>
	<span translate>can unlock the contract</span> 
	<span translate>if an event is posted by an oracle</span><br>
	<span class="combobox-container p20l">
		<input class="m0 inline" type="text" id="oracle_address" name="oracle_address" placeholder="TrustNote address of the oracle" ng-model="contract.oracle_address" valid-address required style="width: 280px;" selectable="#oracle_list" dropdown-toggle="#oracle_list" data-model="contract" data-prop="oracle_address" autocomplete="off" not-selected>
	</span>
	  <ul id="oracle_list" class="f-dropdown small" data-dropdown-content style="max-width: 280px;">
		<li ng-repeat="(address, oracle) in oracles" class="dropup-item" data-value="{{address}}">
			<a><b >{{oracle.name}}</b><br><span>{{address}}</span></a>
		  </li>
	  </ul>
	  <br>
	<span translate class="p20l">on feed name</span>
	<input class="m0 inline" type="text" id="feed_name" name="feed_name" valid-feed-name="{{contract.oracle_address}}" placeholder="e.g. BTC_USD" ng-model="contract.feed_name" maxlength="64" required style="width: 180px;">
	<br>
	<span translate class="p20l">with expected value</span>
	<span selectable="#relation" dropdown-toggle="#relation" data-model="contract" data-prop="relation" style="padding: 0 5px; display: inline-block; width: 30px; text-align: center; height: 22px"></span>
		<ul id="relation" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="relation in arrRelations" class="dropup-item" data-value="{{relation}}">
			<a><span >{{relation}}</span></a>
		  </li>
		</ul>
	<input class="m0 inline" type="text" id="feed_value" name="feed_value" valid-feed-value="{{contract.oracle_address}}" ng-model="contract.feed_value" placeholder="1027.06" maxlength="64" required style="width:100px">,<br>
	<span translate>or</span>
	<span selectable="#expiry_party" dropdown-toggle="#expiry_party" data-model="contract" data-prop="expiry_party" data-exclusion-bind="data_party" style="padding:0 5px;"></span>
		<ul id="expiry_party" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="party in arrParties" class="dropup-item" data-value="{{party.value}}">
			<a><span >{{party.display_value}}</span></a>
		  </li>
		</ul>
	<span translate>can unlock the contract after it expires in</span>
	<input type="number" min="0.01" required name="expiry" id="expiry" ng-model="contract.expiry" style="text-align: right" class="inline w30">
	<span translate>days</span>.

	<div class="" ng-show="index.m < index.n && index.m > 1" style="margin-top: 20px;">
		<h4 class="m0 row" translate>Who signs:</h4>
		<div class="row columns large-12 medium-12">
			<ul class="no-bullet m20b whopays">
			  <li class="" ng-repeat="copayer in index.copayers">
				  <span class="size-12 text-gray" ng-show="copayer.me">
					  <i class="icon-contact size-24 m10r"></i>{{'Me'|translate}} <i class="fi-check m5 right"></i>
				  </span>
				  <div class="size-12" style="width: 100%" ng-show="!copayer.me" ng-click="copayer.signs = !copayer.signs">
					  <i class="icon-contact size-24 m10r"></i> {{copayer.name}} ({{copayer.device_address.substr(0,4)}}...) <i class="m5 right" ng-class="copayer.signs ? 'fi-check' : ''"></i>
				  </div>
			  </li>
			</ul>
		</div>
	</div>
	
	<div ng-if="error" class="row columns">
		<span class="has-error size-12">
			{{error}}
		</span>
	</div>
	
	<div class="m20t large-12 large-centered row columns">
		<div >
		</div>
		<div >
		</div>
		<button type="button" class="button black round expand" ng-disabled="!contract.timeout || !contract.myAmount || !contract.peerAmount || contract.peerAmount.$invalid || contractForm.myAmount.$invalid || !contract.oracle_address || contractForm.oracle_address.$invalid || !contract.feed_name || contractForm.feed_name.$invalid || !contract.feed_value || contractForm.feed_value.$invalid || !contract.expiry || !index.isEnoughSignersSelected() || bWorking" ng-style="{'background-color':color}" ng-click="payAndOffer()" translate>
			Pay and offer
		</button>
	</div>
	</form>
</div>